<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>事件委托</h1>
    <p>事件，绑定在父元素上面。然后判断是哪个子元素触发的，做出相应的逻辑。</p>
    <p>事件委托的作用：避免页面中有非常多的事件需要管理。</p>
    <h2>on方法的参数</h2>
    <ol>
        <li>事件名（字符串，必传）</li>
        <li>选择器（用于被委托的对象，可以不传），如果不传表示事件绑定在当前对象上。</li>
        <li>data（任意数据类型，可以不传），作为事件对象的附加参数</li>
        <li>事件处理函数</li>
    </ol>
    <div class="div1">
        <p class="p1">我是p1（点击我有效）</p>
        <p class="p2">我是p1</p>
    </div>
</body>
<script src="../jquery-3.6.0.min.js"></script>
<script>
    $(".div1").on("click",".p1",{name: "奉先"},function(e) {
        console.log(e.data);
        alert("点击了！")
    })
</script>
</html>